<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 发送 AJAX 请求</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script
      crossorigin="anonymous"
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"
    ></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">jQuery发送AJAX请求</h2>
      <button class="btn btn-primary">GET</button>
      <button class="btn btn-danger">POST</button>
      <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
      // 发送get请求
      $(".btn")
        .eq(0)
        .click(function () {
          $.get(
            "http://www.xin.com:8000/jquery",
            { a: 100, b: 200 }, // 查询字符串
            function (data) {
              console.log(data); // 返回结果
            },
            "json" // 将返回的json字符串转换为对象形式
          );
        });

      // 发送post请求
      $(".btn")
        .eq(1)
        .click(function () {
          $.post(
            "http://www.xin.com:8000/jquery",
            { a: 100 }, // 请求体
            function (data) {
              console.log(data);
            },
            "json" // 将返回的json字符串转换为对象形式
          );
        });

      // 发送通用ajax
      $(".btn")
        .eq(2)
        .click(function () {
          $.ajax({
            type: "POST", // 请求方法
            // type:"GET",
            url: "http://www.xin.com:8000/jquery", // URL
            data: { a: 100, b: 200 }, // 请求体
            dataType: "json", // 返回类型
            timeout: 2000, //设置超时
            success: function (response) {
              // 成功回调
              console.log(response);
            },
            error: function (error) {
              // 失败回调
              console.log(error);
            },
            headers: {
              // 设置头信息
              c: 300,
              d: 400,
            },
          });
        });
    </script>
  </body>
</html>
